<template>
  <el-collapse-item name="taskProcessingStatus">
    <div class="top" slot="title">
      <PartitionTitle
        title="任务处理（请勾选下一班组继续执行的任务，其余将自动关闭）"
        type="line"
      ></PartitionTitle>
    </div>
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="240px"
      max-height="240px"
      border
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="selectableFn"
      ></el-table-column>
      <el-table-column label="任务名称" prop="taskName" min-width="100">
        <template slot-scope="{ row }">
          <el-button type="text" @click.stop="handleShowTaskDetail(row)">{{
            row.taskName
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="任务类型"
        prop="taskTypeName"
        min-width="80"
      ></el-table-column>
      <el-table-column
        label="状态"
        prop="statusName"
        min-width="60"
      ></el-table-column>
      <el-table-column
        label="任务截止时间"
        prop="actualExecuteEndTime"
        min-width="90"
      ></el-table-column>
      <el-table-column
        label="执行人"
        prop="operatorName"
        min-width="80"
      ></el-table-column>
    </el-table>
    <!-- 查看表单 -->
    <ExecuteDailog
      :visible.sync="executeDailog.visible"
      :row="executeDailog.row"
      :disabled="true"
    ></ExecuteDailog>
  </el-collapse-item>
</template>
<script>
import { getTaskList } from "@/api/shifts/shiftHandover";
import ExecuteDailog from "@/views/taskMgmt/components/executeTaskDialog";
import { mapState, mapMutations } from "vuex";
export default {
  components: { ExecuteDailog },
  props: {
    // 表单状态，控制不同情况下 表单呈现的效果，1-接班，2-交班，3-历史查看，4-查看班组
    status: {
      type: String,
      default: "2",
    },
    detailKey: {
      type: String,
      default: "handoverDetail",
    },
  },
  data() {
    return {
      list: [],
      executeDailog: {
        visible: false,
        row: null,
      },
      loading: false,
    };
  },
  computed: {
    ...mapState({
      handoverDetail: (state) => state.turnOnDuty.handoverDetail,
    }),
    detailsData() {
      return this[this.detailKey];
    },
  },
  methods: {
    ...mapMutations("turnOnDuty", [
      "SET_HANDOVER_REMAINTASKIDS",
      "SET_HANDOVER_ALLTASKIDS",
    ]),
    getData() {
      if (!this.detailsData) {
        return;
      }
      this.loading = true;
      const { lineCode, allUndoMissionIds } = this.detailsData;
      const param = {
        ids: this.status == "2" ? [] : allUndoMissionIds || [],
        ownedProductionLine: lineCode,
        statusList: this.status == "2" ? ["0", "1", "2", "3", "5"] : [],
      };
      getTaskList(param)
        .then((res) => {
          this.list = res?.data || [];

          const allIds = this.list.map((ele) => ele.id);
          // 保存列表ids
          this.SET_HANDOVER_ALLTASKIDS(allIds);
          // 确认交班时，默认全勾选
          if (this.selectableFn()) {
            this.$nextTick(() => {
              // 默认勾选所有
              this.$refs.Table.toggleAllSelection(true);
              // 保存勾选ids
              this.SET_HANDOVER_REMAINTASKIDS(allIds);
            });
          } else {
            // 非确认交班时，勾选历史记录
            // 设置勾选项（下一班组继续执行的任务项）
            // this.$nextTick(() => {
              if (this.detailsData?.remainMissionIds?.length) {
                const selection = this.detailsData.remainMissionIds;
                setTimeout(() => {
                  this.list.forEach((row) => {
                    if (selection.includes(row.id)) {
                      console.log("row");
                      this.$refs.Table.toggleRowSelection(row, true);
                    }
                  });
                }, 0);
              }
            // });
          }
        })
        .catch((err) => {
          this.list = [];
          this.SET_HANDOVER_ALLTASKIDS([]);
          this.SET_HANDOVER_REMAINTASKIDS([]);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    selectableFn() {
      return this.status == "2";
    },
    // 勾选列表
    handleSelectionChange(selection) {
      const selectionIds = selection.map((ele) => ele.id);
      // 保存数据
      this.SET_HANDOVER_REMAINTASKIDS(selectionIds);
    },
    // 查看任务详情
    handleShowTaskDetail(row) {
      this.executeDailog.row = row;
      this.executeDailog.visible = true;
    },
  },
  watch: {
    detailsData: {
      handler(newVal) {
        if (newVal) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  margin: 20px 0 10px;
}
.block-title {
  margin-bottom: 0;
}
::v-deep {
  .el-table--medium .el-table__cell {
    padding: 0;
    height: 44px;
  }
}
</style>
